<template>
  <Col v-bind="colAttrs" v-show="!dataSource.hidden" :key="dataSource.key">
    <slot v-if="dataSource.slot" :name="dataSource.slot"> </slot>
    <FormItem
      v-else-if="dataSource.itemSlot"
      :label="dataSource.label"
      :labelWidth="getLabelWidth(labelWidth)"
      :prop="dataSource.key"
      :required="dataSource.required"
      :rules="dataSource.rules"
    >
      <slot :name="dataSource.itemSlot" :item="dataSource" />
    </FormItem>
    <FormItem
      v-else
      :label="dataSource.label"
      :labelWidth="getLabelWidth(labelWidth)"
      :prop="dataSource.key"
      :type="dataSource.type"
      :required="dataSource.required"
      :rules="dataSource.rules"
    >
      <template v-if="dataSource.type === 'text'">
        <div style="line-height: 34px">{{ formData.formModel[dataSource.key] }}</div>
      </template>
      <template v-if="dataSource.type === 'select'">
        <Select
          transfer
          v-model="formData.formModel[dataSource.key]"
          :placeholder="getReadonly(readonly) ? '-' : dataSource.placeholder || '请选择'"
          :clearable="getClearable()"
          :multiple="dataSource.multiple"
          :filterable="dataSource.filterable"
          :max-tag-count="dataSource.maxTagCount"
          :disabled="getDisabled(disabled) || getReadonly(readonly)"
          :readonly="getReadonly(readonly)"
          :update="getUpdate(openUpdate, isUpdate)"
          style="width: 100%"
          @on-change="changeValue"
        >
          <Option v-for="item in getOpts(dataSource)" :key="item.value" :value="item.value">
            {{ item.name }}
          </Option>
        </Select>
      </template>
      <template v-if="dataSource.type === 'input'">
        <template v-if="dataSource.inputType !== 'inputnumber'">
          <Input
            v-model="formData.formModel[dataSource.key]"
            :placeholder="getReadonly(readonly) ? '-' : dataSource.placeholder || '请输入'"
            :clearable="getClearable()"
            :type="dataSource.inputType || 'text'"
            :autosize="dataSource.autosize || false"
            :rows="dataSource.rows"
            :maxlength="dataSource.maxlength || null"
            :showWordLimit="dataSource.showWordLimit"
            :border="dataSource.border || true"
            :disabled="getDisabled(disabled) || getReadonly(readonly)"
            :readonly="getReadonly(readonly)"
            :update="getUpdate(openUpdate, isUpdate)"
            @on-change="e => changeValue(e.target.value)"
          />
        </template>
        <template v-else>
          <InputNumber
            v-model="formData.formModel[dataSource.key]"
            :placeholder="getReadonly(readonly) ? '-' : dataSource.placeholder || '请输入'"
            :clearable="getClearable()"
            :disabled="getDisabled(disabled) || getReadonly(readonly)"
            :readonly="getReadonly(readonly)"
            :precision="dataSource.precision"
            :formatter="dataSource.formatter"
            :parser="dataSource.parser"
            :max="dataSource.max"
            :min="dataSource.min"
            :update="getUpdate(openUpdate, isUpdate)"
            style="width: 100%"
            @on-change="changeValue"
          />
        </template>
      </template>
      <template v-if="dataSource.type === 'datePicker'">
        <DatePicker
          transfer
          split-panels
          v-model="formData.formModel[dataSource.key]"
          :format="dataSource.format"
          :clearable="getClearable()"
          :type="dataSource.pickerType || 'daterange'"
          :placement="dataSource.placement || 'bottom-end'"
          :placeholder="getReadonly(readonly) ? '-' : dataSource.placeholder || '请选择'"
          :editable="false"
          :separator="dataSource.separator || '~'"
          :disabled="getDisabled(disabled) || getReadonly(readonly)"
          :readonly="getReadonly(readonly)"
          :update="getUpdate(openUpdate, isUpdate)"
          style="width: 100%"
          @on-change="changeValue"
        />
      </template>
      <template v-if="dataSource.type === 'checkbox'">
        <CheckboxGroup v-model="formData.formModel[dataSource.key]" @on-change="changeValue">
          <Checkbox
            v-for="(item, index) in getOpts(dataSource)"
            :key="index"
            :label="item.value"
            :disabled="getDisabled(disabled) || getReadonly(readonly)"
            :readonly="getReadonly(readonly)"
            :update="getUpdate(openUpdate, isUpdate)"
            style="min-width: 100px"
          >
            {{ item.name }}
          </Checkbox>
        </CheckboxGroup>
      </template>
      <template v-if="dataSource.type === 'radio'">
        <RadioGroup v-model="formData.formModel[dataSource.key]" @on-change="changeValue">
          <Radio
            v-for="(item, index) in getOpts(dataSource)"
            :key="index"
            :label="item.value"
            :disabled="getDisabled(disabled) || getReadonly(readonly)"
            :readonly="getReadonly(readonly)"
            :update="getUpdate(openUpdate, isUpdate)"
            style="min-width: 100px"
          >
            {{ item.name }}
          </Radio>
        </RadioGroup>
      </template>
      <template v-if="dataSource.type === 'cascader'">
        <Cascader
            :readonly="getReadonly(readonly)"
            :data="getCascaderOption(dataSource)"
            :update="getUpdate(openUpdate, isUpdate)"
            v-model="formData.formModel[dataSource.key]"
            @on-change="changeValue"
        ></Cascader>
      </template>
    </FormItem>
  </Col>
</template>

<script setup>
import { useComputed } from './utils/useComputed';
import { useDependencyInjection } from '../../utils/useDependencyInjection';
import { useFormCol } from './utils/useFormCol';

const props = defineProps({
  // 代表表单总入参项config里的小类data
  dataSource: {
    type: Object,
    default: () => {
      return {
        clearable: true,
      };
    },
  },
  // 字典项的汇总data
  dictData: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(['change']);
// inject 获取依赖的值
const { getInject } = useDependencyInjection();
const { formData, labelWidth, disabled, readonly, openUpdate } = getInject([
  'formData',
  'labelWidth',
  'disabled',
  'readonly',
  'openUpdate',
]);
const { changeValue, isUpdate } = useFormCol(props, emits, formData.formModel);
// col样式
const { colAttrs, getDisabled, getReadonly, getUpdate, getLabelWidth, getOpts,getCascaderOption, getClearable } = useComputed(
  props,
  emits
);
</script>
